{% extends 'base.html' %}
{% load static %}

{% block mycss %}
    <link rel="stylesheet" href="{% static 'css/font.css' %}">
    <link rel="stylesheet" href="{% static 'css/xadmin.css' %}">
    <link rel="stylesheet" href="{% static 'css/common.css' %}">

    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script src="{% static 'js/lib/layui/layui.js' %}" charset="utf-8"></script>
    <script type="text/javascript" src="{% static 'js/xadmin.js' %}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
        // 是否开启刷新记忆tab功能
        // var is_remember = false;
    </script>
{% endblock %}

{% block content %}


    {#    <div class="layui-fluid">#}
    {#        <div class="layui-row">#}
    {#            <form class="layui-form" method="post">#}
    {#                <div class="layui-form-item">#}
    {#                    <label for="node_name" class="layui-form-label" style="width: 100px">#}
    {#                        <span class="x-red">*</span>实体名称#}
    {#                    </label>#}
    {#                    <div class="layui-input-inline">#}
    {#                        <input type="text" id="node_name" name="node_name" required=""#}
    {#                               lay-verify="required|node_name"#}
    {#                               autocomplete="off" class="layui-input">#}
    {#                    </div>#}
    {#                    <div class="layui-form-mid layui-word-aux">#}
    {#                        <span class="x-red">*</span>实体唯一名称#}
    {#                    </div>#}
    {#                </div>#}
    {##}
    {##}
    {#                <div class="layui-form-item">#}
    {#                    <label for="node_label" class="layui-form-label" style="width: 100px">#}
    {#                        <span class="x-red">*</span>实体标签#}
    {#                    </label>#}
    {#                    <div class="layui-input-inline">#}
    {#                        <input type="text" id="node_label" name="node_label" required=""#}
    {#                               lay-verify="node_label"#}
    {#                               autocomplete="off" class="layui-input">#}
    {#                    </div>#}
    {#                    <div class="layui-form-mid layui-word-aux">#}
    {#                        <span class="x-red">*</span>节点标签类型#}
    {#                    </div>#}
    {#                </div>#}
    {#                <div class="layui-form-item">#}
    {#                    <label for="node_attribute" class="layui-form-label" style="width: 100px">#}
    {#                        <span class="x-red">*</span>实体属性#}
    {#                    </label>#}
    {#                    <div class="layui-input-inline">#}
    {#                        <input type="text" id="node_attribute" name="node_attribute" required=""#}
    {#                               lay-verify="node_attribute"#}
    {#                               autocomplete="off" class="layui-input">#}
    {#                    </div>#}
    {#                    <div class="layui-form-mid layui-word-aux">#}
    {#                        <span class="x-red">*</span>实体属性输入以字典形式输入，例：key1:value;key2:value2。#}
    {#                    </div>#}
    {#                </div>#}
    {#                <div class="layui-form-item">#}
    {#                    <button class="layui-btn" lay-filter="add" lay-submit="add">#}
    {#                        保存#}
    {#                    </button>#}
    {#                </div>#}
    {#            </form>#}
    {#        </div>#}
    {#    </div>#}



    <div class="layui-container" style="margin-top: 30px">
        <form class="layui-form" method="post">
            <div class="layui-row">
                <div style="margin: 10px 0 20px;">
                    <div style="margin-top: 10px;margin-bottom: 10px;">
                        <label style="font-weight: bold;color: #333333">实体名称</label>
                    </div>
                    <input placeholder="实体唯一名称" id="node_name" name="node_name" required=""
                           lay-verify="required|node_name" type="text" class="layui-input my-input">
                </div>
                <div style="margin: 10px 0 20px;">
                    <div style="margin-top: 10px;margin-bottom: 10px;">
                        <label style="font-weight: bold;color: #333333">实体标签</label>
                    </div>
                    <input placeholder="节点标签类型" type="text" id="node_label" name="node_label" required=""
                           lay-verify="node_label" class="layui-input my-input">
                </div>
                <div style="margin: 10px 0 20px;">
                    <div style="margin-top: 10px;margin-bottom: 10px;">
                        <label style="font-weight: bold;color: #333333">实体属性</label>
                    </div>
                    <input placeholder="实体属性输入以字典形式输入，例：key1:value;key2:value2。" type="text" name="node_attribute"
                           required=""  id="node_attribute"
                           lay-verify="node_attribute" class="layui-input my-input">
                </div>
            </div>

            <div>
                <button lay-filter="add" lay-submit="add" class="my-btn" style="float: right;" id="sub"> 确认</button>
            </div>
        </form>
    </div>







{% endblock %}
{% block myjs %}
    <script>layui.use(['form', 'layer'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                node_name: function (value) {
                    if (value.length < 1) {
                        return '实体名称不能为空';
                    }
                },
                node_label: function (value) {
                    if (value.length < 1) {
                        return '实体标签不能为空';
                    }
                },


            });

            //监听提交
            form.on('submit(add)',
                function (data) {

                    $.getJSON('{% url 'node_add' %}', {
                            node_name: data.field.node_name,
                            node_label: data.field.node_label,
                            node_attribute: data.field.node_attribute,
                        }, function (data) {
                            if (data.status === 1) {
                                layer.alert("增加成功", {
                                        icon: 6
                                    },
                                    function () {
                                        //关闭当前frame
                                        xadmin.close();

                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            } else if (data.status === 2) {
                                layer.alert('本体名已存在')
                            } else if (data.status === 10) {
                                layer.alert(data.msg)
                            } else {
                                layer.alert('添加失败')
                            }
                        }
                    );


                    return false;
                });

        });</script>

{% endblock %}

